<template>
  <div id="projectCustom">
    <div class="filterQuery">
      <div class="tiao">
        <span class="label">客户类型：</span>
        <el-radio-group v-model="radio" size="small">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="供应商"></el-radio-button>
          <el-radio-button label="项目公司"></el-radio-button>
          <el-radio-button label="担保方"></el-radio-button>
          <el-radio-button label="核心企业"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="clientId" label="序号"  align="center"></el-table-column>
        <el-table-column prop="companyName" label="客户名称" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <!-- <el-table-column prop="lsCheck" label="中登查询" align="center"></el-table-column>
        <el-table-column prop="regDate" label="中登更新时间" align="center"></el-table-column> -->
        <!-- <el-table-column label="状态" align="center">
          <template slot-scope="scope"></template>
        </el-table-column> -->
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "projectCustom",
  data() {
    return {
      radio: "",
      currentPage: 1,
      total: null,
      tableData: [],
      total: null
    };
  },
  created() {
    this.getdata(1);
  },
  methods: {
    getdata(val) {
      this.currentPage = val;
      let obj = {
        projectId: sessionStorage.getItem("swdypId") - 0,
        type: this.radio,
        page: this.currentPage
      };
      this.axios
        .get("AdminAPI/project/showProjectClientList", {
          params: this.filterNoneObj(obj)
        })
        .then(({ data }) => {
          this.tableData = data.data;
          this.total = data.pageInfo.total;
        });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(val);
    }
  },
  watch: {
    radio: function() {
      this.getdata(1);
    }
  }
};
</script>

<style lang="scss">
#projectCustom {
  .filterQuery {
    margin-top: 10px;
    background: #e2eefd;
    padding-left: 34px;
    position: relative;
    .tiao {
      padding: 6px 0;
      .label {
        font-size: 20px;
        vertical-align: middle;
        color: #333333;
      }
      .el-radio-button__inner {
        border: none;
        padding: 6px 15px;
        font-size: 18px;
        border-radius: 0;
        margin-right: 15px;
      }
    }
  }
  .table {
    background: white;
    padding-top: 26px;
    .has-gutter tr th {
      background: #fefaf1;
    }
    .block {
      text-align: right;
      margin-right: 55px;
      height: 50px;
      margin-top: 20px;
    }
  }
}
</style>
